<div class="electricity">
  <div class="electricity-container">
    <header>

      <div class="farms">
        <ul class="farmList">
          <li class="farm-name"><i></i>风场：</li>
          <li *ngFor="let item of farms let i =index " [ngClass]="{active:item.farmId == currentFarm.farmId}" (click)="onFarmClick(item)">{{item.farmName}}</li>
        </ul>
      </div>

      <div class="time-choose">
        <div class="time-spans">
          <span class="time">
            <span (click)=onClickHeader(3) [ngClass]="{on:dateType==3}">年度</span>
          <span (click)=onClickHeader(2) [ngClass]="{on:dateType==2}">月度</span>
          </span>

          <span>
            <span>选择时间：</span>
          <span *ngIf="true">   
<select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
<option [value]="year" *ngFor="let year of years" > {{year}} </option>               
</select>
年
</span>
          <span *ngIf="dateType==2">   
<select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
<option [value]="month" *ngFor="let month of months" > {{month}}</option>               
</select>
月
</span>
          </span>

          <span>
<button class="button-trend" (click)="onSearch(dateType)">确定</button>
</span>

        </div>
      </div>
    </header>

    <div class="main">
      <div class="main-content">

        <div class="top">
          <section>
            <div class="top-left-chart chart">
              <div>
                <p>{{ currentYear }}年<span *ngIf="dateType==2">{{currentMonth}}月</span>{{ currentFarm?.farmName }}风场<span *ngIf="dateType==3">各月</span>损失电量</p>
              </div>
              <div class="echarts-left">
                <app-loss-electricity-echart style="width:100%"
                [xAxisData]="xAxisData" 
                [series]="seriesColumn"
             
                [show1]="show3"
                [show2]="show4"
                [position1]="position3"
                [position2]="position4"></app-loss-electricity-echart>
              </div>
            </div>
          </section>

          <section>
            <div class="top-right-chart chart">
              <div>
                <p>{{currentYear}}年<span *ngIf="dateType==2">{{currentMonth}}月</span>{{currentFarm?.farmName}}风场<span *ngIf="dateType==3">各月</span>能量利用率</p>
              </div>
              <div class="echarts-right">
                <app-loss-electricity-echart  
                [xAxisData]="xAxisData" 
                [series]="seriesLine" 
                
                [show1]="show1"
                [show2]="show2"
                [position1]="position1"
                [position2]="position2"></app-loss-electricity-echart>
                
              </div>
            </div>

          </section>

        </div>

        <div class="bottom">
          <div class="bottom-chart">
            <div>
              <p>{{currentYear}}年<span *ngIf="dateType==2">{{currentMonth}}月</span>{{currentFarm?.farmName}}风场各风机损失电量</p>
            </div>

            <div class="echarts-bottom">
              <app-loss-electricity-echart 
              [xAxisData]="XAxisDataTurbine" 
              [series]="series"
              [isTurb]="true"
              [show1]="show5"
                [show2]="show6"
                [position1]="position5"
                [position2]="position6"></app-loss-electricity-echart>
            </div>

          </div>

        </div>

      </div>
    </div>

  </div>
</div>